.rule-details-panel-container {
  width: 100%;
  max-width: 1600px;
  padding: 16px 24px;
  border-radius: 8px;
  background: var(--requestly-color-black, #000);
  margin: auto;
  margin-top: 16px;
  position: relative;

  &.sample-rule {
    background: var(--requestly-color-surface-1, #282828);

    .details-panel {
      .rule-details-container {
        border: none;
        max-width: 100%;

        .title {
          color: var(--requestly-color-text-default, #fff);

          font-style: normal;
          font-weight: 500;
          font-size: var(--requestly-font-size-sm);
          line-height: var(--line-height-sm, 20px); /* 153.846% */
          display: flex;
          align-items: center;

          &::after {
            content: "SAMPLE RULE";

            display: inline-flex;
            padding: var(--space-3, 6px);
            align-items: center;
            gap: var(--space-0, 0px);
            color: var(--requestly-color-primary-0);
            text-align: center;
            font-size: var(--requestly-font-size-2xs);
            font-style: normal;
            font-weight: 500;
            line-height: 9px; /* 90% */
            letter-spacing: 1px;
            text-transform: uppercase;

            border-radius: var(--space-2, 4px);
            background: rgba(0, 78, 235, 0.4);
            margin-left: 8px;
          }
        }

        .description {
          color: var(--requestly-color-text-subtle, #bbb);

          font-style: normal;
          font-weight: 400;
          font-size: var(--requestly-font-size-sm);
          line-height: var(--line-height-sm, 20px); /* 153.846% */
          line-clamp: 4;
          -webkit-line-clamp: 4;
        }
      }
    }
  }

  .link.ant-btn {
    padding: 0;
    height: 14px;
    display: inline-flex;
    align-items: center;
    color: var(--requestly-color-primary-text, #639ff9);
    align-self: flex-end;
    font-size: var(--requestly-font-size-xs);
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 14.3px */
    padding-top: 2px;

    &.ant-btn > .anticon + span {
      margin-left: 4px;
    }

    .anticon {
      margin-top: 3px;
    }

    &:hover {
      text-decoration: underline;
    }
  }

  .title {
    font-weight: 500;
    line-height: 150%; /* 19.5px */
    margin-bottom: 8px;
    font-size: var(--requestly-font-size-sm);
    color: var(--requestly-color-text-default, #fff);
  }

  .close-btn {
    position: absolute;
    top: 2px;
    right: 2px;
    padding: 8px;
    cursor: pointer;
    color: var(--requestly-color-white);
    transition: opacity 0.2s;

    &:hover {
      opacity: 0.7;
    }

    svg {
      width: 16px;
      height: 16px;
    }
  }

  .details-panel {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;

    .rule-details-container {
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
      width: 100%;
      max-width: 480px;
      border-right: 1px solid var(--requestly-color-white-t-20, rgba(255, 255, 255, 0.12));

      .title {
        margin-bottom: 0;
      }

      .description {
        font-size: var(--requestly-font-size-xs);
        line-height: 130%; /* 14.3px */
        color: var(--requestly-color-text-subtle, #bbb);
        display: -webkit-box;
        line-clamp: 5;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      .links {
        margin-top: auto;

        display: flex;
        align-items: center;
        gap: 24px;

        .ant-btn {
          display: inline-flex;
          align-items: center;
          gap: 4px;

          font-size: var(--requestly-font-size-xs);
          font-weight: 400;
          line-height: 130%; /* 14.3px */
          width: min-content;
        }
      }

      .actions {
        margin-top: auto;

        display: flex;
        align-items: center;
        gap: 12px;

        .ant-btn {
          display: inline-flex;
          align-items: center;
          gap: 4px;

          color: var(--requestly-color-text-default, #fff);
          font-size: var(--requestly-font-size-xs, 11px);
          font-style: normal;
          font-weight: 500;
          line-height: var(--line-height-xs, 15px); /* 136.364% */
        }
      }
    }

    .use-cases-container {
      flex-basis: 500px;

      ul.use-cases-list {
        padding-left: 0;
        list-style: none;
        margin-bottom: 0;

        li.use-case-list-item {
          display: flex;
          align-items: center;
          gap: 8px;
          line-height: 150%; /* 14.3px */
          margin-top: 8px;
          font-size: var(--requestly-font-size-xs);
          color: var(--requestly-color-text-subtle, #bbb);

          svg.list-item-icon {
            flex-shrink: 0;
            align-self: flex-start;
            width: 13px;
            height: 14px;
            margin-top: 3px;
          }

          &:first-child {
            margin-top: 0;
          }

          .use-case {
            display: -webkit-box;
            line-clamp: 3;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;

            br {
              display: none;
            }
          }
        }
      }
    }
  }
}

@media (max-width: 1390px) {
  .rule-details-panel-container .details-panel .rule-details-container {
    border-right: none;
  }
}
